$bg-dark-primary: #512da8;
$bg-primary: #673ab7;
$bg-light-primary: #d1c4e9;
$txt-light-primary: #ffffff;
$txt-dark-secondary: #616161;

$max-width-1: 480px;
$max-width-2: 880px;

#major {
	overflow: hidden;

	display: flex;
	align-items: flex-start;

	@media (max-width: $max-width-1) {
		flex-direction: column;
		align-items: center;
	}

	#catalog {
		width: 10rem;

		background-color: #fff;

		overflow: visible;

		@media (max-width: $max-width-1) {
			width: 100%;
		}

		#majorPart {
			width: 11rem;

			padding: 1rem 0 2rem 0;

			overflow: scroll;

			display: block;

			@media (max-width: $max-width-1) {
				width: 100%;

				padding: 1rem;

				border-style: none none solid none;
				border-width: 2px;
				border-color: $bg-light-primary;

				display: flex;
				flex-wrap: wrap;
			}

			button {
				width: 10rem;
				height: 1.8rem;

				margin: 0;

				border-width: 6px 0 6px 6px;
				border-color: $bg-light-primary;
				border-style: none;

				font-size: 1rem;

				background-color: #fff;

				@media (max-width: $max-width-1) {
					width: auto;

					padding: 0 1rem;

					border-width: 2px;

					font-size: 0.8rem;
				}
			}
		}
	}

	#content {
		width: 20rem;

		padding: 1.5rem 1.5rem 2.5rem 1.5rem;
		margin: 0 0 0 1rem;

		background-color: #fff;

		overflow: scroll;

		display: none;

		@media (max-width: $max-width-1) {
			width: 100%;
		}

		button {
			border-style: none;
		}
	}
}
